<template>
    <div class="app-container">
        <!--搜索栏-->
        <div class="filter-container">
            <el-input
            v-model="listQuery.search"
            placeholder="全局搜索"
            style="width:200px;"
            class="filter-item"
            />
            <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handlFilter"
            >搜索</el-button>
            </el-input>
        </div>
        <!--table表格-->
        <el-table
        v-loading="loadingTableVisible"
         :element-loading-text="loadingTableTitle"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="list"
      border
      style="width: 100%;font-size:12px;"
      :row-style="{height:'30px'}"
      :cell-style="{padding:'3px'}"
        >
       <el-table-column label="编号" prop="id" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
         <el-table-column label="客户名" prop="userName" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
           <el-table-column label="产品名称" prop="projectName" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.projectName }}</span>
        </template>
      </el-table-column>
             <el-table-column label="价格" prop="price" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
           <el-table-column label="折扣" prop="discount" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.discount }}</span>
        </template>
      </el-table-column>
              <el-table-column label="总价" prop="totalPeice" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.totalPeice }}</span>
        </template>
      </el-table-column>
              <el-table-column label="支付类型" prop="payType" align="center" width="80">
        <template slot-scope="scope">
             <el-tag
            :type="scope.row.status==='paid'? 'success':(scope.row.status==='paying'?'danger':'warning')"
          >{{ parseType(scope.row.payType) }}</el-tag>
        </template>
      </el-table-column>
               <el-table-column label="订单状态" prop="status" align="center" width="80">
        <template slot-scope="scope">
           <el-tag
            :type="scope.row.status==='recharge'? 'success':'danger'"
          >{{ parseStatus(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
        <el-table-column label="创建日期" width="150" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.creationTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建IP地址" prop="creationIP" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.creationIP }}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" label="操作" fixed="right" width="120">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" round >详情</el-button>
        </template>
      </el-table-column>
        </el-table>
    <!--分页-->
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        />
    </div>
</template>

<script>
import waves from '@/directive/waves' // 按钮波纹
import { parseTime } from '@/utils' // 工具
import pagination from '@/components/TablePage' // 分页
import {getOrderList} from '@/api/site/order'
import { getEnum } from '@/utils/global'
export default {
    directives: { waves },
    components: { pagination },
    data(){
        return{
            listQuery:{
                page:1,
                limit:20,
                search:''
            },
            list:[],
            total:0,
            loadingTableVisible:false,
            loadingTableTitle:'拼命加载中',
            payType:null,//支付类型
            orderStatus:null,//订单状态

        }
    },
    created(){
        this.payType=getEnum('saaS.Entity.Enums.PayType')
        this.orderStatus=getEnum('saaS.Entity.Enums.OrderStatus')
        this.getOrders()
    },
    methods:{
        getOrders(){
            this.loadingTableVisible=true
            getOrderList(this.listQuery).then((response)=>{
                this.list=response.data.items
                this.total=response.data.total
                this.loadingTableVisible=false
            }).catch(()=>{
                this.loadingTableVisible=false
            })
        },
        handlFilter(){

        },
        parseStatus(status){
            return this.orderStatus[status]
        },
        parseType(type){
            return this.payType[type]
        }
    }
}
</script>